<template>
  <div class="email-confirm">
      <div class="email-confirm-header"></div>
      <div class="email-success-box">
        <div class="email-success-title">Congratulations!</div>
        <div class="info">
          The mail address has been validated successfully. Please click Sign In button to login
        </div>
      </div>
    <button class="btn" @click="VerifyEmail">Sign In</button>
  </div>
</template>

<script type="text/ecmascript-6">
  import {EmailConfirm} from 'api/email-confirm'
  import {mapGetters} from 'vuex'
    export default {
      computed:{
        ...mapGetters([
          'Upemail',
        ])
      },
      created() {
        this.userId= this.$route.query.userId;
        this.code = this.$route.query.code;
          this._EmailConfirm()
      },
        methods:{
          _EmailConfirm() {
            EmailConfirm(this.userId,this.code).then(() => {
            })
          },
          VerifyEmail(){
            this.$router.push({
              path: `/sign-in/`
            });
          }
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
  .email-confirm
    width: 520px
    margin auto
    background: $color-white
    color #333
    text-align: center;
    margin-bottom 75px
    .email-confirm-header
      color: #18823a;
      font-size:40px
      margin: 3.5rem auto 3rem;
      text-align center
      background url('meet.jpg') no-repeat center center
      height: 2.5rem;
      background-size auto 100%
    .email-success-box
      text-align center
      padding 0 8%
      .email-success-title
        font-weight bold
        font-size: 20px;
        margin: 1.5rem 0 1.5rem 0
      .info
        font-size:16px;
        line-height:20px
        margin-bottom:2rem
    .btn
      width:84%;
      height:2.5rem
      line-height 2.5rem
      background #18823a
      font-size:16px
      text-align center
      color:#fff
      border:none
      margin-top: 3rem
</style>
